<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" xmlns:sec="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style type="text/css">
        .d1 {
            text-align: center;
        }
        .d2 {
            width: 400px;
            height: 400px;
            border: 1px solid darkseagreen;
            float: left;
            margin-left: 80px;
        }
        .dd {
            float: right;
            margin: 10px;
        }
        h1, h3 {
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>首页</h1>
    <!--未登录-->
    <div class="dd" sec:authorize="!isAuthenticated()">
        <a th:href="@{/toLogin}">登录</a>
    </div>
    <!--已登录-->
    <div class="dd" sec:authorize="isAuthenticated()">
        <p>用户名：<span sec:authentication="principal.username"></span></p>
        <p>角色：<span sec:authentication="principal.authorities"></span></p>
        <p><a th:href="@{/logout}">注销</a></p>
    </div>

    <div class="d1">
        <div class="d2" sec:authorize="hasRole('vip1')">
            <h3>资源一</h3>
            <p><a href="/level1/1">资源列表1</a></p>
            <p><a href="/level1/2">资源列表2</a></p>
            <p><a href="/level1/3">资源列表3</a></p>
        </div>
        <div class="d2" sec:authorize="hasRole('vip2')">
            <h3>资源二</h3>
            <p><a href="/level2/1">资源列表1</a></p>
            <p><a href="/level2/2">资源列表2</a></p>
            <p><a href="/level2/3">资源列表3</a></p>
        </div>
        <div class="d2" sec:authorize="hasRole('vip3')">
            <h3>资源三</h3>
            <p><a href="/level3/1">资源列表1</a></p>
            <p><a href="/level3/2">资源列表2</a></p>
            <p><a href="/level3/3">资源列表3</a></p>
        </div>
    </div>
</body>
</html>